<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)

onMounted(() => {
  const myChart = echarts.init(chartRef.value)

  const option = {
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
      // formatter: '{b}<br/>{a0}: {c0}万<br/>{a1}: {c1}万'
    },
    legend: {
      data: ['2025年', '2024年', '2023年', '2022年'],
      top: 0,
      icon: 'rect', // 设置为矩形形状
      itemWidth: 16, // 直线长度
      itemHeight: 1 // 高度很小，看起来像直线
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '6%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      nameLocation: 'center', // 标签居中
      nameGap: 30, // 调整标签与轴线距离
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      name: '月份'
    },
    yAxis: {
      type: 'value',
      name: '规模',
      nameLocation: 'end', // 名称显示在Y轴起始位置（顶部）
      axisLabel: {
        formatter: '{value} 万'
      },
      nameTextStyle: {
        padding: [0, 60, 0, 0]
      }
    },
    series: [
      {
        name: '2025年',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#F5222D' // 红色
        },
        label: {
          show: true,
          position: 'top',
          formatter: function (params) {
            return params.value + '万'
          },
          color: '#F5222D'
        },
        data: [245.2, 212.8, 362.7, 600.2, 691.8, 612.2, 734.8, 597.8, 652.2, 619.9, 639.8, 687.4]
      },
      {
        name: '2024年',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#1088FF' // 蓝色
        },
        label: {
          show: true,
          position: 'top',
          formatter: function (params) {
            return params.value + '万'
          },
          color: '#1088FF'
        },
        data: [113.7, 162.6, 298.6, 423.2, 572.5, 400.2, 498.3, 423.5, 424.9, 382.0, 382.0, 534.6]
      },
      {
        name: '2023年',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#FFB928' // 黄色
        },
        label: {
          show: true,
          position: 'top',
          formatter: function (params) {
            return params.value + '万'
          },
          color: '#FFB928'
        },
        data: [234.3, 245.2, 362.7, 619.9, 639.8, 687.4, 600.2, 691.8, 612.2, 734.8, 597.8, 652.2]
      },
      {
        name: '2022年',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#859BBB' // 灰色
        },
        label: {
          show: true,
          position: 'top',
          formatter: function (params) {
            return params.value + '万'
          },
          color: '#859BBB'
        },
        data: [687.4, 600.2, 691.8, 691.8, 612.2, 734.8, 597.8, 652.2, 234.3, 245.2, 362.7, 619.9]
      }
    ]
  }

  myChart.setOption(option)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
})
</script>
<style lang="scss" scoped>
.chart-container {
  width: 920px;
  height: 438px;
  margin: 0 auto;
}
</style>
